<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist/proinfo' }">{{proinfo.proNo}}</el-breadcrumb-item>
        <el-breadcrumb-item>成员列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline" >
            <!-- 成员姓名 -->
            <el-form-item label="成员姓名" prop="userId">
              <el-select
                v-model="formInline.userId"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value></el-option>
                <!-- 循环所有客户 客户名称 客户ID -->
                <el-option
                  v-for="(item,index) in meblist"
                  :key="index"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 搜索 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
          <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <el-button
            v-if="btnAdd"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="addHandle"
          >添加</el-button>
          <!-- 删除 -->
          <!-- <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="batchRemove"
            v-if="btnDel"
          >删除</el-button> -->
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="menusData"
          border
          @selection-change="selsChange"
          style="width: 100%"
          height="580"
          ref="menusData"
        >
          <!-- 全选 -->
          <!-- <el-table-column type="selection" width="40" fixed></el-table-column> -->
          <!-- 序号 -->
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <!-- 成员姓名 -->
          <el-table-column width="100px" align="center" label="成员" prop="userName"></el-table-column>
          <!-- 工号 -->
          <el-table-column width="100px" align="center" label="工号" prop="userId"></el-table-column>
          <!-- 角色 -->
          <el-table-column width="100px" align="center" prop="role" label="项目角色"></el-table-column>
          <!-- 职责 -->
          <el-table-column width="100px" align="center" prop="jobs" label="项目职责">
            <template slot-scope="scope">{{ scope.row.jobs | filterJobs(scope.row.jobs) }}</template>
          </el-table-column>
          <!-- 参与日期 -->
          <el-table-column label="参与日期" width="130px" align="center">
            <template slot-scope="scope">
              {{scope.row.joinTime | filterTime }}
            </template>
          </el-table-column>
          <!-- 离开日期 -->
          <el-table-column label="离开日期" width="130px" align="center">
           <template slot-scope="scope">
              {{scope.row.quitTime | filterTime }}
            </template>
          </el-table-column>
           <!-- 人工成本 -->
          <el-table-column label="人工成本">
            <template slot-scope="scope">
              {{scope.row.cost === null || scope.row.cost === undefined ? '' : '¥' + scope.row.cost + '元/天'}}
            </template>
          </el-table-column>
          <!-- 报销标准 -->
          <el-table-column label="报销标准">
            <template slot-scope="scope">
              {{scope.row.standard === null ? '' : '¥' + scope.row.standard + '元/天'}}
            </template>
          </el-table-column>
          <!-- 操作列 -->
          <el-table-column
            label="管理"
            fixed="right"
            align="center"
            width="160"
            v-if="[btnDel,btnEdit].indexOf(true) > -1"
          >
            <template slot-scope="scope">
              <!-- 删除 -->
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)" v-if="btnDel">删除</el-button>
              <!-- 修改 -->
              <el-button size="mini" @click="editHandle(scope.row)" v-if="btnEdit">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹窗 新增or修改 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <!-- 添加、修改表单 -->
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <!-- 成员 -->
            <el-form-item label="成员姓名" prop="userId">
              <el-autocomplete
                v-model="editForm.user"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入姓名"
                @select="selectUserId"
                style="width:100%;"
                clearable
                :disabled="isEdit"
              >
                <template slot-scope="{ item }">
                  <div class="selName">
                    <span>{{ item.compName }} - {{ item.deptName }}</span>
                    <span>{{ item.userName }}</span>
                    <span>[{{ item.userId }}]</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <!-- 参与日期 -->
            <el-form-item label="参与日期" prop="joinTime">
              <el-date-picker v-model="editForm.joinTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 角色 -->
            <el-form-item label="成员角色" prop="roles">
              <el-select v-model="editForm.roles" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 角色成本 -->
            <el-form-item label="成员职责" prop="jobs">
               <el-select v-model="editForm.jobs" filterable clearable placeholder="请选择" style="width:100%;">
                <el-option-group
                  v-for="group in roleList"
                  :key="group.label"
                  :label="group.label">
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 离开日期 -->
            <el-form-item label="离开日期" prop="quitTime">
              <el-date-picker v-model="editForm.quitTime" type="date" placeholder="选择日期" style="width:100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- 人工成本 -->
            <el-form-item label="人工成本" prop="cost">
              <el-input placeholder="请输入金额" v-model="editForm.cost" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                <template slot="prepend">￥</template>
                <template slot="append">元/天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- 报销标准 -->
            <el-form-item label="报销标准" prop="standard">
              <el-input placeholder="请输入金额" v-model="editForm.standard" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                <template slot="prepend">￥</template>
                <template slot="append">元/天</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 取消 关闭弹窗 -->
        <el-button @click.native="dialogFormVisible=false">取消</el-button>
        <!-- 添加 清空表单初始数据 -->
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          @click="createData"
        >添加</el-button>
        <!-- 修改获取表单初始数据 -->
        <el-button v-else type="primary" @click="editData">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { _debounce } from '@/public/debounce';
import moment from 'moment';

export default {
  // 当前实例数据
  data () {
    return {
      isEdit: false,
      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 搜索条件
      formInline: {
        userId: ''
      },

      // 所有员工数据
      usersAll: [],

      // 模糊搜索
      restaurants: [],
      state: '',
      timeout: null,

      meblist: [],
      // 列表数据
      menusData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // 项目基本信息
      proinfo: {},

      // 弹窗类别
      dialogStatus: '',

      // 弹窗标题
      textMap: {
        edit: '修改信息',
        create: '添加信息'
      },
      // 弹窗是否显示
      dialogFormVisible: false,

      // 列表选中列
      sels: [],

      // 界面默认数据
      editForm: {
        user: '',
        roles: [],
        joinTime: '',
        quitTime: '',
        jobs: '',
        cost: 0,
        standard: 0
      },

      options: [{
        label: '项目经理',
        value: 'XMJL'
      }, {
        label: '成员',
        value: 'CY'
      }],

      roleList: [{
        label: '总经办',
        options: [{
          value: '总经理',
          label: '总经理'
        }]
      }, {
        label: '销售部',
        options: [{
          value: '销售副总',
          label: '销售副总'
        }, {
          value: '销售总监',
          label: '销售总监'
        }, {
          value: '销售经理',
          label: '销售经理'
        }, {
          value: 'XS-交付经理',
          label: '交付经理'
        }, {
          value: '销售助理',
          label: '销售助理'
        }, {
          value: 'XS-交付助理',
          label: '交付助理'
        }, {
          value: '销售专员',
          label: '销售专员'
        }]
      }, {
        label: '商务部',
        options: [{
          value: '商务经理',
          label: '商务经理'
        }, {
          value: '商务助理',
          label: '商务助理'
        }, {
          value: '商务专员',
          label: '商务专员'
        }]
      }, {
        label: '项目管理办公室',
        options: [{
          value: 'PMO经理',
          label: 'PMO经理'
        }, {
          value: '体系专员',
          label: '体系专员'
        }, {
          value: '技术方案工程师',
          label: '技术方案工程师'
        }, {
          value: '运营专员',
          label: '运营专员'
        }]
      }, {
        label: '项目部',
        options: [{
          value: '项目经理',
          label: '项目经理'
        }, {
          value: '项目助理',
          label: '项目助理'
        }, {
          value: '开发',
          label: '开发'
        }, {
          value: '测试',
          label: '测试'
        }, {
          value: '实施',
          label: '实施'
        }, {
          value: '运维',
          label: '运维'
        }, {
          value: '行政助理',
          label: '行政助理'
        }]
      }, {
        label: '研发部',
        options: [{
          value: '研发副总',
          label: '研发副总'
        }, {
          value: 'YF-业务线负责人',
          label: '业务线负责人'
        }, {
          value: 'YF-项目经理',
          label: '项目经理'
        }, {
          value: 'UI',
          label: 'UI'
        }, {
          value: '测试',
          label: '测试'
        }, {
          value: '测试管理',
          label: '测试管理'
        }, {
          value: '开发',
          label: '开发'
        }, {
          value: '开发管理',
          label: '开发管理'
        }, {
          value: 'SE',
          label: 'SE'
        }, {
          value: '实施',
          label: '实施'
        }, {
          value: '运维',
          label: '运维'
        }]
      }, {
        label: '综合事务部',
        options: [{
          value: '人事经理',
          label: '人事经理'
        }, {
          value: '人事主管',
          label: '人事主管'
        }, {
          value: '招聘主管',
          label: '招聘主管'
        }, {
          value: '人事助理',
          label: '人事助理'
        }, {
          value: '人事专员',
          label: '人事专员'
        }, {
          value: '招聘专员',
          label: '招聘专员'
        }, {
          value: '行政助理',
          label: '行政助理'
        }]
      }, {
        label: '财务部',
        options: [{
          value: '财务主管',
          label: '财务主管'
        }, {
          value: '出纳',
          label: '出纳'
        }, {
          value: '会计',
          label: '会计'
        }]
      }]
    };
  },

  filters: {
    filterTime (value) {
      return moment(value).format('YYYY-MM-DD') === 'Invalid date' ? '' : moment(value).format('YYYY-MM-DD');
    },
    filterJobs (value) {
      if (value === null || value === undefined || value === '') {
        return '无';
      } else {
        if (value.indexOf('-') > -1) {
          return value.substring(3, value.length + 1);
        } else {
          return value;
        }
      }
    }
  },

  mounted () {
    this.restaurants = this.loadAll();
    // this.getHeight();
    // // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false);
  },

  // 创建实例后执行
  created () {
    // 获取项目基本信息
    this.getProinfo();
    // 获取项目所有成员
    this.getMembers();
    // 数据列表
    this.getmenusDataByPage();

    this.getUsersAll();
  },

  methods: {
    // 表格高度自适应
    // getHeight () {
    // // 获取浏览器高度并计算得到表格所用高度。
    //   this.tableHeight = document.documentElement.clientHeight - 350;
    // },
    // 获取所有员工数据
    getUsersAll () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.usersAll.push({
              compName: datas[i].compName,
              deptName: datas[i].deptName,
              userId: datas[i].userId,
              userName: datas[i].userName
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 加载全部员工数据
    loadAll () {
      return this.usersAll;
    },

    // 自动检索匹配
    querySearchAsync (queryString, cb) {
      let _this = this;
      let restaurants = _this.restaurants;
      let results = queryString ? restaurants.filter(_this.createStateFilter(queryString)) : restaurants;
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },

    // 查询
    createStateFilter (queryString) {
      return (state) => {
        return (state.userName.indexOf(queryString) === 0);
      };
    },

    // 新增时 选择员工
    selectUserId (item) {
      this.editForm.user = item.userName + ' [' + item.userId + ']';
    },

    // 获取项目信息
    getProinfo () {
      let project = JSON.parse(sessionStorage.getItem('project'));
      this.proinfo = project;
    },
    // 获取项目成员
    getMembers () {
      let _this = this;
      let params = {
        proId: _this.proinfo.id
      };
      _this.$http.post('api/findAllProMember', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.meblist = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 查询
    selHandle: function () {
      let _this = this;
      // 收集请求数据
      let params = {
        proId: _this.proinfo.id,
        userId: _this.formInline.userId === null ? '' : _this.formInline.userId,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };
      // 根据项目ID获取分页数据
      _this.$http.raw('api/findProMebByUserId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取分组数据
    getAllGroup () {
      let _this = this;
      // 获取分页数据
      _this.$http.raw('api/findAllGroup').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.cusList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 刷新页面数据
    getmenusDataByPage () {
      let _this = this;
      // 收集请求信息
      let params = {
        proId: _this.proinfo.id,
        userId: _this.formInline.userId === null ? '' : _this.formInline.userId,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };
      // 获取分页数据
      _this.$http.raw('api/findProMebByUserId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.total = datas.total;
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getmenusDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getmenusDataByPage();
    },

    // 显示编辑界面
    editHandle: function (row) {
      let _this = this;
      // 弹窗类型
      _this.dialogStatus = 'edit';
      _this.isEdit = true;
      // 弹窗显示状态
      _this.dialogFormVisible = true;
      _this.editForm = {
        id: row.id,
        proId: row.proId,
        user: row.userName + ' [' + row.userId + ']',
        roles: row.roleCode,
        jobs: row.jobs,
        cost: row.cost,
        joinTime: row.joinTime,
        quitTime: row.quitTime,
        standard: row.standard
      };
    },

    // 显示新增界面
    addHandle: function () {
      let _this = this;
      // 弹窗类型
      _this.dialogStatus = 'create';
      // 弹窗显示状态
      _this.dialogFormVisible = true;
      _this.isEdit = false;

      // 初始化新增界面默认数据
      _this.editForm = {
        user: '',
        roles: '',
        joinTime: '',
        quitTime: '',
        standard: 0,
        jobs: '',
        cost: 0
      };
      let aa = [];
      _this.menusData.map(item => {
        aa.push(item.role);
      });
      if (aa.indexOf('项目经理') > -1) {
        _this.options = [{
          label: '成员',
          value: 'CY'
        }];
      };
    },
    // 修改
    editData: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            let userId = _this.editForm.user;
            if (userId.indexOf('[') && userId.indexOf(']')) {
              userId = userId.slice(userId.indexOf('[') + 1, userId.indexOf(']'));
            }
            // 收集请求数据
            let params = {
              id: _this.editForm.id,
              proId: _this.proinfo.id,
              userId: userId,
              role: _this.editForm.roles === 'XMJL' ? '项目经理' : '成员',
              roleCode: _this.editForm.roles === 'XMJL' ? 'XMJL' : 'CY',
              joinTime: moment(_this.editForm.joinTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.editForm.joinTime).format('YYYY-MM-DD'),
              quitTime: moment(_this.editForm.quitTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.editForm.quitTime).format('YYYY-MM-DD'),
              standard: _this.editForm.standard === 0 ? null : parseInt(_this.editForm.standard),
              jobs: _this.editForm.jobs,
              cost: _this.editForm.cost === 0 ? null : parseInt(_this.editForm.cost)
            };
            // 修改用户信息
            _this.$http.raw('api/updateProMember', params).then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                // 初始化弹出窗表单数据
                _this.$refs['editForm'].resetFields();
                // 关闭弹窗
                _this.dialogFormVisible = false;
                // 刷新列表
                _this.getmenusDataByPage();
                _this.getAllGroup();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 添加
    createData: _debounce(function () {
      let _this = this;
      _this.$nextTick(() => {
        // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            let userId = _this.editForm.user;
            if (userId.indexOf('[') && userId.indexOf(']')) {
              userId = userId.slice(userId.indexOf('[') + 1, userId.indexOf(']'));
            }
            // 收集请求参数
            let params = {
              proId: _this.proinfo.id,
              userId: userId,
              role: _this.editForm.roles === 'XMJL' ? '项目经理' : '成员',
              roleCode: _this.editForm.roles === 'XMJL' ? 'XMJL' : 'CY',
              joinTime: moment(_this.editForm.joinTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.editForm.joinTime).format('YYYY-MM-DD'),
              quitTime: moment(_this.editForm.quitTime).format('YYYY-MM-DD') === 'Invalid date' ? null : moment(_this.editForm.quitTime).format('YYYY-MM-DD'),
              standard: _this.editForm.standard === 0 ? null : parseInt(_this.editForm.standard),
              jobs: _this.editForm.jobs,
              cost: _this.editForm.cost === 0 ? null : parseInt(_this.editForm.cost)
            };
            // 添加用户
            _this.$http.raw('api/insertProMember', params).then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                _this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
                _this.$refs['editForm'].resetFields();
                _this.dialogFormVisible = false;
                // 刷新列表
                _this.getmenusDataByPage();
                _this.getAllGroup();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 200),

    // 删除
    handleDelete (data) {
      let _this = this;
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = {
          id: data.id
        };
        // 根据数据ID删除对应用户信息
        _this.$http.post('api/delProMember', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
            _this.getAllGroup();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 全选、单选、多选
    selsChange: function (sels) {
      this.sels = sels;
    },

    // 批量删除
    batchRemove: function () {
      let _this = this;
      // 判断是否选择数据
      if (!_this.sels.length) {
        _this.$message.warning('您还没选择任何数据！');
        return;
      }
      // 二次删除确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 修改状态，逻辑删除
        let params = [];
        // 获取选中数据ID集合
        _this.sels.map(item => {
          return params.push(item.id);
        });
        // 删除对应ID用户信息
        _this.$http.raw('api/batchDelCusGroup', params).then(res => {
          let { code } = res;
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '批量删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
            _this.getAllGroup();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
